<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="职称管理">
        管理专家职称信息，包括教授、副教授、讲师等职称等级。
      </n-card>
    </div>
    <n-card :bordered="false" title="职称列表" class="mt-4">
      <n-space vertical :size="16">
        <!-- 搜索栏 -->
        <n-space justify="space-between">
          <n-space>
            <n-input
              v-model:value="searchParams.keyword"
              placeholder="请输入职称名称"
              style="width: 300px"
              clearable
            />
            <n-select
              v-model:value="searchParams.status"
              placeholder="状态筛选"
              :options="statusOptions"
              style="width: 150px"
              clearable
            />
            <n-button type="primary" @click="handleSearch">
              <template #icon>
                <n-icon>
                  <SearchOutline />
                </n-icon>
              </template>
              搜索
            </n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
          <n-button type="primary" @click="handleAdd">
            <template #icon>
              <n-icon>
                <AddOutline />
              </n-icon>
            </template>
            新增职称
          </n-button>
        </n-space>

        <!-- 数据表格 -->
        <n-data-table
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :pagination="pagination"
          :row-key="rowKey"
          @update:page="handlePageChange"
        />
      </n-space>
    </n-card>

    <!-- 新增/编辑弹窗 -->
    <n-modal
      v-model:show="showModal"
      :title="modalTitle"
      preset="card"
      style="width: 500px"
      :mask-closable="false"
    >
      <n-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-placement="left"
        :label-width="100"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="职称名称" path="name">
          <n-input v-model:value="formData.name" placeholder="请输入职称名称" style="width: 100%" />
        </n-form-item>
        <n-form-item label="职称等级" path="level">
          <n-input-number
            v-model:value="formData.level"
            placeholder="请输入职称等级"
            :min="1"
            :max="10"
            style="width: 100%"
          />
        </n-form-item>
        <n-form-item label="状态" path="status">
          <n-radio-group v-model:value="formData.status">
            <n-space>
              <n-radio :value="1">启用</n-radio>
              <n-radio :value="0">禁用</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="排序" path="sort">
          <n-input-number
            v-model:value="formData.sort"
            placeholder="请输入排序值"
            :min="0"
            :max="999"
            style="width: 100%"
          />
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input
            v-model:value="formData.remark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="2"
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="showModal = false">取消</n-button>
          <n-button type="primary" :loading="submitLoading" @click="handleSubmit">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { useTitle } from './index';

const {
  // 搜索相关
  searchParams,
  statusOptions,
  // 表格相关
  loading,
  tableData,
  pagination,
  columns,
  rowKey,
  // 表单相关
  showModal,
  modalTitle,
  submitLoading,
  formRef,
  formData,
  rules,
  // 方法
  handleSearch,
  handleReset,
  handlePageChange,
  handleAdd,
  handleEdit,
  handleDelete,
  handleSubmit,
  // 图标组件
  SearchOutline,
  AddOutline,
  CreateOutline,
  TrashOutline,
} = useTitle();
</script>

<style scoped>
.n-layout-page-header {
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style> 